<template>
  <VDialog
    @close="handleClose"
    @save="save"
    :loading="loading"
    :title="isEdit ? '编辑' : '新增'"
    width="960px"
  >
    <template #content>
      <div>
        <el-form
          ref="formRef"
          :model="formValues"
          :rules="rules"
          label-position="top"
        >
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="支票号" prop="checkNo">
                <el-input
                  v-model="formValues.checkNo"
                  placeholder="请输入支票号"
                  class="w-[100%]"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="支票凭证号" prop="voucherNo">
                <el-input
                  v-model="formValues.voucherNo"
                  placeholder="请输入支票凭证号"
                  class="w-[100%]"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="出票日期" prop="ticketAt">
                <el-date-picker
                  v-model="formValues.ticketAt"
                  type="date"
                  placeholder="选择日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  class="w-[100%]"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="供应商名称" prop="supplierName">
                <!-- <el-select-v2
                  v-model="formValues.supplierId"
                  placeholder="供应商名称"
                  :options="options?.supplierList || []"
                  clearable
                  filterable
                  class="w-[100%]"
                  @change="handleSupplier"
                /> -->
                <el-input
                  v-model="formValues.supplierName"
                  placeholder="请输入供应商名称"
                  class="w-[100%]"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="采购制单人" prop="procurementMakerId">
                <VCascader
                  v-model="formValues.procurementMakerId"
                  :multiple="false"
                  class="w-[100%]"
                  @change="handleProcurementMaker"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="金额(RMB)" prop="amount">
                <el-input-number
                  v-model="formValues.amount"
                  :min="0"
                  placeholder="请输入"
                  :controls="false"
                  class="w-[100%]"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="事业处" prop="departmentId">
                <VCascader
                  v-model="formValues.departmentId"
                  type="1"
                  :checkStrictly="true"
                  :multiple="false"
                  class="w-[100%]"
                  @change="handleDept"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="移交制单人日期">
                <el-date-picker
                  v-model="formValues.transferProducerAt"
                  type="date"
                  placeholder="选择日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  class="w-[100%]"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="密码提供日期">
                <el-date-picker
                  v-model="formValues.passwordProvisionAt"
                  type="date"
                  placeholder="选择日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  class="w-[100%]"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="实际汇出/扣款日期">
                <el-date-picker
                  v-model="formValues.debitAt"
                  type="date"
                  placeholder="选择日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  class="w-[100%]"
              /></el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="支付密码">
                <el-input
                  v-model="formValues.paymentPassword"
                  placeholder="请输入支付密码"
                  class="w-[100%]"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12"> </el-col>
          </el-row>
          <el-form-item label="用途" prop="checkUse">
            <el-input
              v-model="formValues.checkUse"
              :autosize="{ minRows: 2, maxRows: 4 }"
              type="textarea"
              placeholder="请输入用途"
            />
          </el-form-item>
          <el-form-item label="备注">
            <el-input
              v-model="formValues.remark"
              :autosize="{ minRows: 2, maxRows: 4 }"
              type="textarea"
              placeholder="请输入备注"
            />
          </el-form-item>
        </el-form>
      </div>
    </template>
  </VDialog>
</template>
<script setup>
import { ElMessage } from "element-plus";
import { editCheckDetail, addCheckDetail } from "../../../api.js";
const props = defineProps({
  data: { type: Object, default: () => {} },
  options: { type: Object, default: () => {} },
});
const { data, options } = toRefs(props);
const isEdit = computed(() => data.value?.id);
const emit = defineEmits(["update:modelValue", "close", "refresh"]);
const loading = ref(false);
const formRef = ref();
const formValues = ref({
  id: null,
  supplierName: null,
  departmentId: null,
  procurementMakerId: null,
  checkNo: null,
  voucherNo: null,
  amount: null,
  paymentPassword: null,
  checkUse: null,
  remark: null,
  ticketAt: null,
  transferProducerAt: null,
  passwordProvisionAt: null,
  debitAt: null,
  department: null,
  procurementMaker: null,
});
const rules = reactive({
  checkNo: [{ required: true, message: "请输入支票号", trigger: "blur" }],
  voucherNo: [{ required: true, message: "请输入支票凭证号", trigger: "blur" }],
  ticketAt: [{ required: true, message: "请选择出票日期", trigger: "change" }],
  supplierName: [
    { required: true, message: "请选择供应商", trigger: "change" },
  ],
  procurementMakerId: [
    { required: true, message: "请选择采购制单人", trigger: "change" },
  ],
  amount: [{ required: true, message: "请输入金额", trigger: "blur" }],
  departmentId: [
    { required: true, message: "请选择事业处", trigger: "change" },
  ],
  checkUse: [{ required: true, message: "请输入用途", trigger: "blur" }],
});
watch(
  () => props.data,
  (val) => {
    if (val) {
      for (let key in formValues.value) {
        formValues.value[key] = val[key];
      }
    }
  }
);
// const handleSupplier = (val) => {
//   let obj = options?.value?.supplierList?.find((item) => item.value == val);
//   if (!obj) return (formValues.value.supplierName = null);
//   formValues.value.supplierName = obj.label;
// };
const handleProcurementMaker = (val) => {
  formValues.value.procurementMaker = val?.labels?.[0] || null;
};
const save = async () => {
  await formRef.value.validate(async (valid, fields) => {
    if (valid) {
      try {
        loading.value = true;
        const { code, message } = await (formValues.value?.id
          ? editCheckDetail
          : addCheckDetail)(formValues.value);
        if (code !== 200) return;
        ElMessage.success(formValues.value?.id ? "编辑成功" : "添加成功");
        handleClose(true);
      } catch (error) {
      } finally {
        loading.value = false;
      }
    }
  });
};
const handleDept = (val) => {
  const { labels } = val || {};
  formValues.value.department = labels[0];
  console.log(val);
};
const handleClose = async (refresh) => {
  formValues.value = {
    id: null,
    departmentId: null,
    department: null,
    procurementMakerId: null,
    checkNo: null,
    voucherNo: null,
    amount: null,
    paymentPassword: null,
    checkUse: null,
    remark: null,
    ticketAt: null,
    transferProducerAt: null,
    passwordProvisionAt: null,
    debitAt: null,
    supplierName: null,
    procurementMaker: null,
  };
  formRef.value.resetFields();
  emit("update:modelValue", false);
  emit("close");
  if (refresh) emit("refresh");
};
</script>
